<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/shopping-mall-index.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/zhonglin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/zhongling2.js"></script>
    <script>

        $(function () {
            //验证用户名是否重复，使用jquery的ajax
            $("#userName").blur(function () {

                //ajax请求
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/checkUserName",
                    type: "post",
                    data: {
                        username: $(this).val()
                    },
                    success: function (data) {
                        if (data == "yes") {
                            $("#userNameMsg").attr("class", "dui")
                            $("#userNameMsg").text("用户名可用")
                        } else {
                            $("#userNameMsg").attr("class", "cuo")
                            $("#userNameMsg").text("用户名已存在")
                        }

                    }
                })
            })
            // 密码验证
            $("#password").blur(function () {
                $("#rePassword").val("")
                $("#rePasswordMsg").attr("class", "cuo")
                $("#rePasswordMsg").text("密码不一致，请重新输入")
                //正则表达式
                var pattern = /^(?=.*[\d])(?=.*[a-zA-Z])(?=.*[\W])[\d\Wa-zA-Z]{6,16}$/
                if (pattern.test($(this).val())) {
                    $("#passwordMsg").attr("class", "dui")
                    $("#passwordMsg").text("密码正确")
                } else {
                    $("#passwordMsg").attr("class", "cuo")
                    $("#passwordMsg").text("密码由6-16的字母、数字、符号组成")
                }

            })
            //确认密码
            // 密码验证
            $("#rePassword").blur(function () {
                if ($(this).val() == $("#password").val()) {
                    $("#rePasswordMsg").attr("class", "dui");
                    $("#rePasswordMsg").text("确认密码正确")
                } else {
                    $("#rePasswordMsg").attr("class", "cuo");
                    $("#rePasswordMsg").text("确认密码与密码不符")
                }

            })
            //手机号验证
            $("#phone").blur(function () {
                var pattern = /^1[358][0-9]{9}$/
                if (pattern.test($(this).val())) {
                    $("#phoneMsg").attr("class", "dui");
                    $("#phoneMsg").text("手机号正确")
                } else {
                    $("#phoneMsg").attr("class", "cuo");
                    $("#phoneMsg").text("手机号错误")

                }
            })

            //获取验证码
            $("#changeCode").click(function(){
                $("#code").attr("src","${pageContext.request.contextPath}/validate/getCode?timer="+Math.random())
            })

            $("#code").click(function(){
                 $(this).attr("src","${pageContext.request.contextPath}/validate/getCode?timer="+Math.random())
            })

            //验证验证码是否正确
            $("#validate").blur(function(){
                 $.ajax({
                     url:"${pageContext.request.contextPath}/validate/checkValildate",
                     data:{
                         code:$("#validate").val()
                     },
                     success:function(data){
                         if(data=="ok"){
                              $("#validateMsg").attr("class","dui");
                             $("#validateMsg").text("验证码正确")
                         }else{
                             $("#validateMsg").attr("class","cuo");
                             $("#validateMsg").text("验证码错误")
                         }
                     }
                 })
            })
        })

        function sub(){
            var flag=true
            //验证
            $("[name='msg']").each(function(){
                if($(this).attr("class")=="cuo"){
                    flag=false;
                }
            })
            return flag;
        }
    </script>
</head>

<body>

<!--header-->
<%@include file="common/header.jsp" %>

<!--logo search weweima-->
<%@include file="common/logoAndSearch.jsp" %>

<!--内容开始-->
<form action="${pageContext.request.contextPath}/user/doRegister" method="post" onsubmit="return sub()">
<div class="password-con registered">
    <div class="psw">
        <p class="psw-p1">用户名</p>
        <input type="text" placeholder="请输入用户名" name="username" id="userName" value="${username}" required/>
        <span id="userNameMsg" name="msg">
            ${empty userNameMsg?'用户名不能重复':userNameMsg}
       </span>
    </div>
    <div class="psw">
        <p class="psw-p1">输入密码</p>
        <input type="text" placeholder="请输入密码" name="password" id="password" required/>
        <span id="passwordMsg" name="msg">密码由6-16的字母、数字、符号组成</span>
    </div>
    <div class="psw">
        <p class="psw-p1">确认密码</p>
        <input type="text" placeholder="请再次确认密码" name="rePassword" id="rePassword" required/>
        <span id="rePasswordMsg" name="msg">密码不一致，请重新输入</span>
    </div>
    <div class="psw psw2">
        <p class="psw-p1">手机号/邮箱</p>
        <input type="text" placeholder="请输入手机/邮箱验证码" name="phone" id="phone" required/>
        <span class="cuo" id="phoneMsg" name="msg">手机号为11位数字</span>
    </div>

    <div class="psw psw3">
        <p class="psw-p1">验证码</p>
        <input type="text" placeholder="请输入验证码" name="validate" id="validate"/>
        <span id="validateMsg" name="msg"></span>
    </div>
    <div class="yanzhentu">
        <div class="yz-tu f-l">
            <img src="${pageContext.request.contextPath}/validate/getCode" id="code"/>
        </div>
        <p class="f-l">看不清？<a href="javaScript:;" id="changeCode">换张图</a></p>
        <div style="clear:both;"></div>
    </div>
    <div class="agreement">
        <input type="checkbox" name="hobby" id="hobby" required></input>
        <p>我有阅读并同意<span>《宅客微购网站服务协议》</span></p>
    </div>
    <button class="psw-btn" id="register">立即注册</button>
    <p class="sign-in">已有账号？请<a href="#">登录</a></p>
</div>
</form>
<!--底部一块-->
<%@include file="common/footer.jsp" %>

</body>
</html>
